dotPos(density, stageWidth, stageHeight) { const imageData = this.ctx.getImageData(0, 0, stageWidth, stageHeight).data; const imageData = this.ctx.getImageData(0, 0, stageWidth, stageHeight).data; const particles = []; let i = 0; let width = 0; let pixel; for (let height = 0; height < stageHeight; height++) { ++i; const slide = i % 2 === 0; width = 0; if (slide === 1) { width += 6; } for (width; width < stageWidth; width += density) { pixel = imageData[(width + height * stageWidth) * 4 - 1]; if (pixel !== 0 && width > 0 && width < stageWidth && height > 0 && height < stageHeight) { particles.push({ x: width, h: height, }); } } }Estoy estudiando el código anterior, pero no sé qué significa la siguiente línea:
pixel = imageData[(width + height * stageWidth) * 4 - 1];por favor, ayúdame.
Los data de ImageData son un Uint8ClampedArray que representa los píxeles de ImageData de forma lineal. Cada elemento de esta matriz plana representa el valor rojo, verde, azul y alfa de cada píxel.
Entonces, para recorrer cada píxel, en realidad necesita saltar 4 elementos a la vez, de ahí el * 4 .
Dado que estos datos son planos, para restaurar un modelo cartesiano, debe multiplicar el valor de y por el ancho de ImageData y agregarle el valor de x .
| yo: 0 x: 0 y: 0 | yo: 1 x: 1 y: 0 | yo: 2 x: 2 y: 0 |
|---|---|---|
| yo: 3 x: 0 y: 1 | yo: 4 x: 1 y: 1 | yo: 5 x: 2 y: 1 |
| yo: 6 x: 0 y: 2 | yo: 7 x: 1 y: 2 | yo: 8 x: 2 y: 2 |
Entonces (width + height * stageWidth) * 4 corresponde al punto en coords {x: width, y: height} .
El -1 obtendría el canal alfa del píxel anterior , linealmente: si el width es cero, entonces obtendrá el alfa del último punto de la fila anterior, lo que, para ser honesto, parece muy extraño ya que en width: 0 height: 0 entonces esto volvería undefined .
const width = x0; const height = 0; const stageWidth = 3; const imageData = new ImageData(stageWidth, stageWidth).data; console.log(imageData[(width + height * 4) -1]); Por lo general, hacemos (x + y * width) * 4 + 3 para obtener el canal alfa en la coordenada en la que estamos realmente en nuestra iteración.
Sí, en realidad evitan este caso undefined en la condición && width > 0 pero, sinceramente, esto suena como una casualidad y no cambia el hecho de que este código no huele muy bien.
Y esto no es lo más extraño que sucede aquí:
const slide = i % 2 === 0; siempre se evaluará como true o false , nunca nada más, por lo que la condición if (slide === 1) nunca coincidirá.
Si yo fuera usted, no trataría de aprender de esto y buscaría otros ejemplos en su lugar.
Y esto sin considerar la declaración doble de la constante imageData , que debe ser un error de copiar y pegar, ya que este código arrojaría un SyntaxError con él.